@import "../style/variable";
@import "../style/mixin";

.dev-tools { .tools {
    .console {
        .control {
            @include absolute(100%, 40px);
            cursor: default;
            padding: 10px 10px 10px 40px;
            background: #fff;
            line-height: 20px;
            .icon-ban, .icon-info-circle {
                display: inline-block;
                color: $gray;
                padding: 10px;
                font-size: $font-size-l;
                position: absolute;
                top: 1px;
                cursor: pointer;
                transition: color $anim-duration;
                &:active {
                    color: $gray-dark;
                }
            }
            .icon-ban {
                left: 0;
            }
            .icon-info-circle {
                right: 0;
            }
            .filter {
                cursor: pointer;
                color: $gray;
                margin: 0 1px;
                font-size: $font-size-s;
                height: 20px;
                display: inline-block;
                padding: 0 4px;
                line-height: 20px;
                border-radius: $border-radius;
                transition: background $anim-duration, color $anim-duration;
                &.active {
                    background: $gray;
                    color: #fff;
                }
            }
        }
        padding-top: 40px;
        padding-bottom: 40px;
        .js-input {
            position: absolute;
            left: 0;
            bottom: 0;
            width: 100%;
            background: #fff;
            height: 40px;
            .buttons {
                display: none;
                position: absolute;
                left: 0;
                top: 0;
                width: 100%;
                height: 40px;
                color: $gray;
                font-size: $font-size-s;
                border-bottom: 1px solid $gray-light;
                .button {
                    cursor: pointer;
                    width: 50%;
                    display: inline-block;
                    text-align: center;
                    border-right: 1px solid $gray-light;
                    height: 40px;
                    line-height: 40px;
                    float: left;
                    &:last-child {
                        border-right: none;
                    }
                    transition: background $anim-duration, color $anim-duration;
                    &:active {
                        background: $blue;
                        color: #fff;
                    }
                }
            }
            textarea {
                padding: 10px;
                outline: none;
                border: none;
                font-size: 14px;
                width: 100%;
                height: 100%;
                user-select: text;
                resize: none;
            }
        }
    }
} }
